<template>
    <div class="left-pie">
        <public-title :title="props.title" :theme-type="themeType">
            <template #right>
                {{ props.tips }}
            </template>
        </public-title>
        <div class="inner" ref="healthChart"></div>
        <div class="count">
            <div class="t">总人数</div>
            <div class="v">{{ userCount }}</div>
        </div>
    </div>
</template>
<script setup lang="ts">
    import PublicTitle from '/@/components/publicTitle.vue';
    import { circleRing } from '/@/components/item-d/pieCharts.ts';
    import { onMounted, ref, watch } from 'vue';
    import * as echarts from 'echarts';

    const props = defineProps({
        title: {
            type: String,
            default: () => '',
        },
        data: {
            type: Array,
            default: () => [],
        },
        color: {
            type: Array,
            default: () => [],
        },
        tips: {
            type: String,
            default: () => '',
        },
        userCount: {
            type: Number,
        },
        themeType: {
            type: String,
            default: () => '',
        },
    });
    const healthChart = ref<HTMLElement>();
    onMounted(() => {
        init();
    });

    watch(
        () => props.data,
        () => {
            init();
        },
        {
            deep: true,
        }
    );

    async function init() {
        initChart(props.data, props.userCount, props.color);
    }

    function initChart(chartData, total, color) {
        let myChart = echarts.init(healthChart.value);
        let options = circleRing(chartData, total, color);
        myChart.setOption(options);
        window.addEventListener('resize', () => {
            myChart.resize();
        });
    }
</script>
<style scoped lang="less">
    .inner {
        width: 100%;
        margin: 0 auto;
        height: calc(100% - 40px);
    }

    .inner::after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 20px;
        height: 20px;
        background-color: #051a2b;
    }

    .left-pie {
        position: relative;
        padding-bottom: 0 !important;
    }

    .count {
        position: absolute;
        width: 80%;
        top: 51%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-size: 22px;
        font-weight: bold;
        z-index: 1;
        pointer-events: none;

        > div {
            width: 80px;
            z-index: 0;
        }

        .t {
            font-size: 14px;
            font-weight: normal;
        }
    }
</style>
